<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-20 14:46:39
 * @LastEditTime: 2022-02-10 13:35:23
 * @LastEditors: xuechengwu
-->
<template>
  <el-container class="home-box">
      <el-header>
          <div class="home-title">可视化搭建演示平台</div>
      </el-header>
      <el-container>
        <el-aside width="320px">
            <div class="aside-wrapper">
                <div class="aside-nav">
                    <ths-nav @change="changeTab"/>
                </div>
                <div class="aside-container">
                    <component-list v-if="tab === 'component'"></component-list>
                    <layout-list v-if="tab === 'layout'"></layout-list>
                    <scene-list
                        v-if="tab === 'scene'"
                        :containers="$store.state.containers"    
                    ></scene-list>
                </div>
            </div>
        </el-aside>
        <el-main>
            <div class="editor-container" ref="container">
                <editor
                    class="editor"
                />
            </div>
        </el-main>
        <el-aside width="240px">
            <div class="aside-config">
                <config-view
                    v-if="!!currentComponent"
                    :page="curPage"
                    :app="$store.state"
                    :mark="currentComponent.mark"
                    :name="currentComponent.name"
                />
                <page-config
                    v-if="!currentComponent"
                    :page="curPage"
                />
            </div>
        </el-aside>
      </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex';
import ThsNav from './Nav.vue';
import ComponentList from './ComponentList.vue';
import SceneList from './SceneList.vue';
import Editor from './Editor.vue';
import ConfigView from './ConfigView.vue';
import PageConfig from './PageConfig/index.vue';
import LayoutList from './LayoutList.vue';

export default {
    components: {
        ThsNav,
        ComponentList,
        SceneList,
        Editor,
        ConfigView,
        PageConfig,
        LayoutList,
    },
    mounted() {
        document.addEventListener('keyup', (e) => {
            if (e.keyCode === 46) {
                this.$store.commit('REMOVE_COMPONENT');
            }
        });
        this.$refs.container.addEventListener('click', () => {
            this.$store.commit('UNSELECT_COMPONENT');
        });
        
    },
    computed: {
        ...mapGetters(['curPage', 'currentComponent']),
    },
    watch: {
        currentComponent(val) {
            console.log('current component change===>', !!val, val)
        }
    },
    data() {
        return {
            tab: 'scene',
        };
    },
    methods: {
        changeTab(val) {
            this.tab = val;
        }
    }
}
</script>

<style lang="less" scoped>
::v-deep .el-header {
    position: relative;
    .home-title {
        line-height: 60px;
        font-size: 32px;
        font-weight: 800;
    }
    &::after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: ' ';
        display: inline-block;
        height: 1px;
        width: 100%;
        background: #DEDEDE;
    }
}
.home-box {
    width: 100%;
    height: 100%;
    .aside-wrapper {
        display: flex;
        height: 100%;
        position: relative;
        &::after {
            content: ' ';
            position: absolute;
            top: 0;
            width: 1px;
            height: 100%;
            background: #EFEFEF;
            right: 0;
            display: inline-block;
        }
        .aside-nav {
            height: 100%;
            /deep/ .el-menu--collapse{
                height: 100%;
            }
        }
        .aside-container {
            text-align: left;
            flex: 1;
        }
    }
    .editor-container {
        width: 100%;
        height: 100%;
        position: relative;
        .editor {
            position: absolute;
            border: solid #EFEFEF 1px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
    .aside-config {
        height: 100%;
        overflow: auto;
        position: relative;
        &::before {
            content: ' ';
            height: 100%;
            left: 0;
            top: 0;
            width: 1px;
            background: #EFEFEF;
            display: inline-block;
            position: absolute;
        }
    }
}
</style>
